import React from 'react';
import {FixedSizeList} from 'react-window';
import ListItem from '@material-ui/core/ListItem';
import '../../style/address.less'
import ItemAddress from "./itemAddress";

class Address extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            fixedColumn: [
                {
                    id: 1,
                    name: "新的朋友",
                    img: "https://demo.popoim.cn/static/h5/img/icon__add-friend.png",
                    to: "/center",
                },
                {
                    id: 2,
                    name: "群聊",
                    img: "https://demo.popoim.cn/static/h5/img/icon__groups.png",
                    to: "/center",
                }
            ],
            friends: [
                {
                    space: true,
                    letter: 'A',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'B',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'C',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'D',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'E',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'F',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'G',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'H',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'I',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'J',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'K',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'L',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'M',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'N',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'O',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'P',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'Q',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'R',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'S',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'T',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'U',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'V',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'W',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'X',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'Y',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: 'Z',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
                {
                    space: true,
                    letter: '#',
                    child: [
                        {
                            id: 1,
                            name: "aaa",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        },
                        {
                            id: 2,
                            name: "bbb",
                            img: "https://demo.popoim.cn/upload/avatars/133/133/315dbad9897f8a.png",
                            to: null,
                            space: false,
                            letter: 'a',
                        }
                    ]
                },
            ],
            letters:[],
        }


    }
    componentDidMount(): void {
        let letters=[];
        this.state.friends.map((v,i)=>{
            letters.push(v.letter)
        })
        this.setState({
            letters:letters
        })
    }

    render() {
        return (
            <div className="addressContent">
                {this.state.fixedColumn.map((v, i) => <ItemAddress key={i} value={v}/>)}
                {this.state.friends.map((v, i) => {
                    let dom = [];
                    dom.push(<div className="itemWarp" key={i + i}><label id={v.letter}>{v.letter}</label></div>)
                    v.child.map((v, i1) => {
                        dom.push(<ItemAddress key={i1 + v.name} value={v}/>)
                    })
                    return dom;
                })}
                <div className="addressLetters">
                    {this.state.letters.map((v, i) =>   <a  key={i} href={"#"+v}>{v}</a>)}
                </div>
            </div>
        )
    }
}

export default Address
